.onboarding-block {
	// Basics and "opted-out" steps
	--contrastColor: var( --studio-white );
	--mainColor: var( --studio-blue-40 );
	--highlightColor: var( --studio-blue-20 );

	.design-selector,
	.style-preview,
	.plans,
	.domains,
	.create-site,
	.create-site-error {
		--contrastColor: var( --studio-white );
		// TODO: This should be Gutenberg's main color
		--mainColor: var( --studio-gray-100 );
		--highlightColor: var( --studio-blue-20 );
	}

	&[data-vertical*='sport' i],
	&[data-vertical~='fooball' i] {
		--contrastColor: #83cd7b;
		--mainColor: #25541f;
		--highlightColor: rgb( 21, 53, 17 );
	}

	&[data-vertical~='shopping' i] {
		--contrastColor: #c2ecde;
		--mainColor: #0e3e58;
		--highlightColor: #0a3750;
	}

	&[data-vertical~='beauty' i] {
		--contrastColor: #fac8ba;
		--mainColor: #434f5c;
		--highlightColor: #2f3a46;
	}

	&[data-vertical~='animals' i],
	&[data-vertical~='dogs' i] {
		--contrastColor: #fed7ad;
		--mainColor: #4c485c;
		--highlightColor: #252330;
	}

	&[data-vertical*='coffee' i] {
		--contrastColor: #4a2512;
		--mainColor: #f2d6b2;
		--highlightColor: #e0c49e;
	}

	&[data-vertical~='food' i],
	&[data-vertical~='restaurant' i] {
		--contrastColor: #e35f27;
		--mainColor: var( --studio-white );
		--highlightColor: var( --studio-gray-0 );
	}

	&[data-vertical~='fashion' i],
	&[data-vertical*='design' i] {
		--contrastColor: #000;
		--mainColor: var( --studio-white );
		--highlightColor: var( --studio-gray-0 );
	}

	&[data-vertical*='real estate' i] {
		--contrastColor: #e3dcd4;
		--mainColor: #425a68;
		--highlightColor: #2f4450;
	}

	&[data-vertical~='marketing' i] {
		--contrastColor: #244458;
		--mainColor: #dffffe;
		--highlightColor: #c9eeed;
	}

	&[data-vertical*='photography' i] {
		--contrastColor: #fff;
		--mainColor: #000;
		--highlightColor: rgb( 54, 54, 54 );
	}

	&[data-vertical*='travel' i] {
		--contrastColor: #3b8598;
		--mainColor: #ffffff;
		--highlightColor: rgb( 209, 209, 209 );
	}
}
